<template>
  <div id="baseinfoDriver" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">基础信息管理</BreadcrumbItem>
				<BreadcrumbItem to="/baseinfo/driver">司机管理</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="showAdd"><i class="fa fa-plus"></i><span>添加</span></Button>
	        <Button type="text" @click="exportDriver"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form  :model="searchForm" :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="机构">
              <Select placeholder="请选择" clearable v-model="searchForm.orgIds" :multiple="true">
                <OrgTreeOption></OrgTreeOption>
              </Select>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="姓名/手机号">
              <Input placeholder="请输入姓名或手机号" v-model="searchForm.driverInfo" clearable />
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search()" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>姓名</th>
						<th>工号</th>
						<th>性别</th>
						<th>联系电话</th>
						<th>身份证号</th>
						<th>初次领证日期</th>
						<th>所属机构</th>
						<th>默认车辆</th>
						<th>紧急联系人及电话</th>
						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.thisPageElements" :key="`driver-list-key-${i}`">
							<td>{{v.driverName}}</td>
							<td>{{v.jobNumber}}</td>
							<td>{{v.sex==1?'女':'男'}}</td>
							<td>{{v.tel}}</td>
							<td>{{v.idNumber}}</td>
							<td>{{v.driverFirstGetTime==null?'--':moment(v.driverFirstGetTime).format('YYYY-MM-DD')}}</td>
							<td>{{v.orgName}}</td>
							<td>{{v.plateNumber}}</td>
							<td>{{v.emergencyContact}}</td>
							<td class="operate">
								<a @click="openView(v.id)">查看</a>
								<a @click="openEdit(v.id)">编辑</a>
								<a @click="showAlloc(v.id)">调动</a>
								<a @click="doDelete(v)">删除</a>
							</td>
						</tr>
             <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="10">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

      <Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <DriverModal v-model="modal.value"  :model="modal.model" @close="close" @add="onAdd" @edit="onEdit" ></DriverModal>

   <!-- 驾驶员调动  -->
   <Modal v-model="modal2"  title="调动" width="500">
     <Form :label-width="120" :model="allocForm" ref="allocForm" :rules="allocRules">
        <FormItem label="姓名" >
          {{viewData.driverName}}(工号:{{viewData.jobNumber}})
        </FormItem>
        <FormItem label="手机号" >
          {{viewData.tel}}

        </FormItem>
        <FormItem label="当前所在机构" >
          {{viewData.orgName}}
        </FormItem>
        <FormItem label="选择要调入的机构"  prop="targetOrgId">
          <Select v-model="allocForm.targetOrgId" placeholder="选择机构"  :transfer="true">
            <OrgTreeOption></OrgTreeOption>
          </Select>
        </FormItem>
     </Form>
     <div slot="footer">
       <Button type="text" @click="modal2 = false">取消</Button>
       <Button type="primary" :loading="isModalLoading" @click="allocSubmit">保存</Button>
     </div>
   </Modal>
  </div>
</template>

<script>
  import DriverModal from './DriverModal'
  import {mapState,mapActions} from 'vuex'
  import moment                from 'moment'
  import {download,post}  					 from '@/util/request'
  export default {
    components:{
      DriverModal
    },

    mounted(){

    },
    data(){
      return {
        current:1,
        modal2:false,
        searchForm:{orgIds:[],driverInfo:''},
        allocForm:{targetOrgId:'',id:'',tel:'',driverName:''},
		allocRules:{
          targetOrgId:{required:true,message:'请选择调入的机构',trigger:'change'}
        },
        modal:{
          value:false,
          model:0, // 0：新增，1：查看，2：编辑
          dataid:null
        }
      };
    },
    computed:{
       ...mapState('base',['userinfo']),
       ...mapState('baseinfo/baseinfoDriver',['pageData','isLoading','isModalLoading','viewData'])
    },
    methods:{
      moment,
      ...mapActions('baseinfo/baseinfoDriver',['reload','delete','loadView']),
      showAlloc(id){
        this.modal2 = true;
        this.loadView(id);
      },
      search(){
				this.searchForm = {
					orgIds:this.searchForm.orgIds,
					driverInfo:this.searchForm.driverInfo
				}
				this.loadPage(1);
			},
      loadPage(n){
				this.current = n;
				this.reload({
					pageNum:this.current,
					...this.searchForm
				});
			},
      close(){
        this.modal.value = false;
      },
      openView(id){
  			this.modal.model = 1;
  			this.modal.value = true;
        this.loadView(id);
      },
      openEdit(id){
        this.modal.model = 2;
        this.modal.value = true;
        this.loadView(id);
      },
      showAdd(){
        this.modal.model = 0;
        this.modal.value = true;
      },
      onAdd(){
        this.loadPage(1);
      },
      onEdit(){
        this.loadPage(this.current);
      },
      async allocSubmit(){

		let v = await this.$refs.allocForm.validate();
		if(v){
			this.isModalLoading = true;
			this.allocForm.id=this.viewData.id;
			this.allocForm.driverName=this.viewData.driverName;
			this.allocForm.tel=this.viewData.tel;
			let res = await post("/base/driver/driverTransfer",this.allocForm);
			this.isModalLoading = false;
			if (res.data.success){
			  this.$Message.success('保存成功');
				this.loadPage(this.current);
			  this.modal2=false;
			}else{
			  this.$Message.error(res.data.msg);
			}
		}

      },
      deleteLoadPage(){
  				let total = this.pageData.totalNumberOfElements - 1;
  				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
  				if (this.current > 1 && this.current > pageSize) {
  					this.current--;
  				}
  				this.loadPage(this.current);
  			},
      async doDelete(v){
        this.$Modal.confirm({
          title: '删除驾驶员',
          content: `是否将驾驶员“${v.driverName}”删除？`,
          loading: true,
          onOk:async ()=>{
            let res = await this.delete({id:v.id});
            if(res.success){
              this.$Modal.remove();
              this.deleteLoadPage();
              this.$Message.success('删除成功');
            }else{
              this.$Modal.remove();
              this.$Message.error(res.msg);
            }
          }
        });
			},
      exportDriver(){
        download('/base/driver/export',this.searchForm);
      },
    }
  }
</script>
